<template>
  <div class="box">
    <div class="login">
      <div class="left">
        <img src="../../../src/assets/images/login/login.png" alt="">
      </div>
      <div class="right">
        <el-form label-position="top" label-width="100px" :model="registerForm" style="max-width: 460px">
          <h3>欢迎注册创思设备管理系统</h3>
          <el-form-item label="姓名">
            <el-input v-model.trim="registerForm.uname" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model.trim="registerForm.email" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model.trim="registerForm.password" type="password" show-password />
          </el-form-item>
          <!-- <div class="password"> -->
          <span>密码强度：<span :class="passwordColor.color">{{ passwordColor.pwdTxt }}</span></span><br>
          <el-checkbox v-model="checkboxFlag">我已阅读用户协议并同意</el-checkbox>
          <!-- </div> -->
          <el-button @click="onRegister" type="info">注册</el-button>
          <div class="flex">
            <span>你已有平台账号？<el-link type="primary" @click="onLogin" :underline="false">用户登录</el-link></span>
            <el-link type="default" @click="onReset" :underline="false">忘记密码</el-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// import axios from 'axios'
import md5 from 'md5'
export default {
  setup() {
    const store = useStore()
    const router = useRouter()
    const { proxy } = getCurrentInstance()
    // 表单的数据
    const registerForm = reactive({
      uname: '',
      email: '',
      password: ''
    })
    // 需要传递给下一个页面的数据
    const obj = reactive({
      uname: '',
      email: ''
    })
    // checkbox状态
    const checkboxFlag = ref(false)
    // 密码强度的数据
    const passwordColor = reactive({
      color: '',
      pwdTxt: ''
    })
    // 跳转到登陆页面
    const onLogin = () => {
      router.push({
        name: 'login'
      })
    }
    // 侦听表单密码长度的变动
    watch(() => registerForm.password, (newVal) => {
      // console.log('侦听到了密码长度的变化', val1.length);
      if (newVal.length === 0) {
        passwordColor.color = ''
        passwordColor.pwdTxt = ''
      } else if (newVal.length <= 2) {
        passwordColor.color = 'red'
        passwordColor.pwdTxt = '简单'
      } else if (newVal.length > 2 && newVal.length <= 6) {
        passwordColor.color = 'yellow'
        passwordColor.pwdTxt = '一般'
      } else {
        passwordColor.color = 'green'
        passwordColor.pwdTxt = '很强'
      }
    })
    const onRegister = async () => {
      // 判断复选框选中状态
      if (!checkboxFlag._value) return ElMessage({
        message: '请勾选协议',
        type: 'error'
      })
      // 发起ajax请求
      await proxy.$http.post('user/register', {
        uname: registerForm.uname,
        email: registerForm.email,
        password: md5(registerForm.password)
      }).then(({ data: res }) => {
        console.log(res);
        if (res.code !== 200) return ElMessage({
          message: res.msg,
          type: 'error'
        })
        ElMessage({
          message: '注册成功',
          type: 'success'
        })
        obj.uname = registerForm.uname
        obj.email = registerForm.email
        // console.log(obj);
        // proxy转换为对象传递给vuex
        store.commit('registerEmail', JSON.parse(JSON.stringify(obj)))
        // console.log(JSON.parse(JSON.stringify(store.state.registerEmail)))
        // 跳转到完善资料页面
        router.push({
          name: 'allData'
        })
      })
    }
    const onReset = () => {
      router.push({
        name: 'reset'
      })
    }
    return {
      registerForm,
      checkboxFlag,
      onLogin,
      passwordColor,
      onRegister,
      onReset,
      obj
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: absolute;
  top: 25%;
  left: 28%;
  width: 45%;
  height: 60%;
  max-width: 720px;
  max-height: 512px;
  min-width: 500px;
  min-height: 500px;

  .login {
    display: flex;
    width: 100%;
    height: 100%;

    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #9A9AEB;
      width: 50%;
      height: 100%;

      img {
        width: 80%;
      }
    }

    .right {
      width: 50%;
      height: 100%;
      background-color: #fff;

      .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}


.el-button {
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.el-form {
  margin: 20% 5%;

  h3 {
    text-align: center;
  }

  span {
    font-size: 14px;
  }
}

// 控制密码强度的css
.red {
  color: #FB0707;
}

.yellow {
  color: skyblue;
}

.green {
  color: #00FF85;
}
</style>